<!-- 模块说明 -->
<template>
    <van-nav-bar
  title="书友搜索"
  left-text=""
  left-arrow
  @click-left="onClickLeft"
/>
<form action="/">
  <van-search
    v-model="value"
    show-action
    action-text="搜索"

    shape="round"
    clear-trigger="always"	
    placeholder="请输入关键词搜索用户"
    @search="onSearch"
    @cancel="onCancel"
  />
</form>

<div class="big">
    <div class="pic">
        <img src="../../img/photo.jpg"/>
    </div>

    <div class="name">
        <span class="n1">小桔书店<img src="../../img/女(1).png"> </span>
        <span class="n2">湖南大学</span>
    </div>

    <div class="data">
        <div class="da1">
            <span>55</span>
            <span>出售</span>
        </div>
        <div class="da2">
            <span>7</span>
            <span>粉丝</span>
        </div>
    </div>
</div>
<!-- ------------------------------------------------------------------ -->
<div class="big">
    <div class="pic">
        <img src="../../img/photo.jpg"/>
    </div>

    <div class="name">
        <span class="n1">书山崎岖何为径<img src="../../img/男(1).png"> </span>
        <span class="n2">大连理工大学</span>
    </div>

    <div class="data">
        <div class="da1">
            <span>199522</span>
            <span>出售</span>
        </div>
        <div class="da2">
            <span>68</span>
            <span>粉丝</span>
        </div>
    </div>
</div>

<div class="big">
    <div class="pic">
        <img src="../../img/photo.jpg"/>
    </div>

    <div class="name">
        <span class="n1">你的书包里装的是什么<img src="../../img/女(1).png"> </span>
        <span class="n2">安徽警官职业学院</span>
    </div>

    <div class="data">
        <div class="da1">
            <span>55</span>
            <span>出售</span>
        </div>
        <div class="da2">
            <span>7</span>
            <span>粉丝</span>
        </div>
    </div>
</div>



</template>

<script setup>
    const onClickLeft = () => history.back();
    const onSearch = (val) => showToast(val);
    const onCancel = () => showToast('搜索');
    // 搜索框组件
//     import { ref } from 'vue';
// import { showToast } from 'vant';

// export default {
//   setup() {
//     const value = ref('');
    
//     return {
//       value,
//       onSearch,
//       onCancel,
//     };
//   },
// };



</script>
<style lang="scss" scoped>
.big{
    height: 60px;
    display: flex;
    // justify-content: center;
    align-items: center;
    border-bottom: 0.5px solid #999;
    // background: darkmagenta;
}
.big div{
    height: 45px;
}
.pic{
    width: 55px;
    // background:deeppink;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pic img{
    width: 45px;
    border-radius: 45px;
    text-align: center;
}
.name{
    width: 180px;
    // background: yellow;
    display: flex;
    flex-direction: column;    
    justify-content: space-between;

}
.name img{
    width: 15px;
    vertical-align: middle;
    margin-left: 4px;
}
.data{
    flex: 1;
    display: flex;
    font-size: 12px;
    // justify-content: space-between;
    // justify-content: space-between;
    // align-content: space-between;
    // align-items: flex-end;
    // justify-content: center;
// align-items: center;   

}
.n1,.n2{
    // background: pink;
    line-height: 20px;
    padding-left: 8px;

}
.n1{
    font-size: 12px;
}
.n2{
    font-size: 10px;
    color: #555;
}

.da1,.da2{
    display: flex;
    width: 50%;
flex-direction: column;
text-align: center;
line-height:16px;
justify-content: center;

}

</style>
